<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>单机全局规则</span>
                <div style="float: right; padding: 3px 0" v-if="!isEdit">
                     <el-button type="primary" size="mini" @click="handleEdit">编辑</el-button>
                </div>
            </div>
            <div>
                <el-form :model="form" label-width="170px" :disabled="!isEdit" :rules="rules">
                  <el-form-item>
                       <span slot="label">
                            <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
                              <span> 全局配置 &nbsp;<i class="el-icon-question"></i>： </span>
                            </el-tooltip>
                       </span>
                       <el-checkbox v-model="form.globalEnabled">启用</el-checkbox>
                  </el-form-item>
                   <el-row :gutter="20" v-if="form.globalEnabled">
                    <el-form-item  prop="globalConcurrent" label="集群共享并发数:" label-width="300px">
                        <div class="wrap">
                             <div class="tips">{{form.globalConcurrent}}</div>
                             <el-col :span="1">=</el-col>
                             <el-col :span="6">
                                 <el-input v-model="form.globalConcurrent" autocomplete="off"></el-input>
                             </el-col>
                             <el-col :span="2">单机*1</el-col>
                        </div>
                    </el-form-item>
                </el-row>
                <el-row :gutter="20"  v-if="form.globalEnabled">
                    <el-form-item  prop="globalQps" label="集群共享QPS:" label-width="300px">
                        <div class="wrap">
                             <div class="tips">{{form.globalQps}}</div>
                             <el-col :span="1">=</el-col>
                             <el-col :span="6">
                                 <el-input v-model="form.globalQps" autocomplete="off"></el-input>
                             </el-col>
                             <el-col :span="2">单机*1</el-col>
                        </div>
                    </el-form-item>
                </el-row>
                  <el-form-item label="服务默认配置:">
                       <el-checkbox v-model="form.serviceDefaultEnabled">启用</el-checkbox>
                  </el-form-item>
                  <el-row :gutter="20" v-if="form.serviceDefaultEnabled">
                    <el-form-item  prop="serviceDefaultConcurrent" label="集群共享并发数:" label-width="300px">
                        <div class="wrap">
                             <div class="tips">{{form.serviceDefaultConcurrent}}</div>
                             <el-col :span="1">=</el-col>
                             <el-col :span="6">
                                 <el-input v-model="form.serviceDefaultConcurrent" autocomplete="off"></el-input>
                             </el-col>
                             <el-col :span="2">单机*1</el-col>
                        </div>
                    </el-form-item>
                </el-row>
                <el-row :gutter="20" v-if="form.serviceDefaultEnabled">
                    <el-form-item  prop="serviceDefaultQps" label="集群共享QPS:" label-width="300px">
                        <div class="wrap">
                             <div class="tips">{{form.serviceDefaultQps}}</div>
                             <el-col :span="1">=</el-col>
                             <el-col :span="6">
                                 <el-input v-model="form.serviceDefaultQps" autocomplete="off"></el-input>
                             </el-col>
                             <el-col :span="2">单机*1</el-col>
                        </div>
                    </el-form-item>
                </el-row>
                  <el-form-item label="appId默认配置:">
                       <el-checkbox v-model="form.appIdDefaultEnabled">启用</el-checkbox>
                  </el-form-item>
                  <el-row :gutter="20" v-if="form.appIdDefaultEnabled">
                    <el-form-item  prop="appIdDefaultConcurrent" label="集群共享并发数:" label-width="300px">
                        <div class="wrap">
                             <div class="tips">{{form.appIdDefaultConcurrent}}</div>
                             <el-col :span="1">=</el-col>
                             <el-col :span="6">
                                 <el-input v-model="form.appIdDefaultConcurrent" autocomplete="off"></el-input>
                             </el-col>
                             <el-col :span="2">单机*1</el-col>
                        </div>
                    </el-form-item>
                </el-row>
                <el-row :gutter="20" v-if="form.appIdDefaultEnabled">
                    <el-form-item  prop="appIdDefaultQps" label="集群共享QPS:" label-width="300px">
                        <div class="wrap">
                             <div class="tips">{{form.appIdDefaultQps}}</div>
                             <el-col :span="1">=</el-col>
                             <el-col :span="6">
                                 <el-input v-model="form.appIdDefaultQps" autocomplete="off"></el-input>
                             </el-col>
                             <el-col :span="2">单机*1</el-col>
                        </div>
                    </el-form-item>
                </el-row>
                   <el-form-item label="限流响应ContentType:">
                       <el-input v-model="form.responseContentType" size="small"></el-input>
                  </el-form-item>
                  <el-form-item label="限流响应报文:">
                       <el-input type="textarea" :rows="4" v-model="form.responseContent" size="small"></el-input>
                  </el-form-item>
                   <el-form-item style="text-align: right" v-if="isEdit">
                        <el-button type="primary" @click="onSubmit" size="mini">提交</el-button>
                        <el-button size="mini" @click="handleCancel">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
import {saveGlobalRule,getGlobalRule} from '@/api/flow/default.api'
    export default {
        data() {
            return {
                form: {
                    globalEnabled: false,
                    serviceDefaultEnabled: false,
                    appIdDefaultEnabled: false
                },
                rules: {
                     globalConcurrent: [{ pattern:/^[0-9]*[1-9][0-9]*$/,message: '请输入大于0的整数'}],
                     globalQps: [{ pattern:/^[0-9]*[1-9][0-9]*$/,message: '请输入大于0的整数'}],
                     serviceDefaultConcurrent: [{ pattern:/^[0-9]*[1-9][0-9]*$/,message: '请输入大于0的整数'}],
                     serviceDefaultQps: [{ pattern:/^[0-9]*[1-9][0-9]*$/,message: '请输入大于0的整数'}],
                     appIdDefaultConcurrent: [{ pattern:/^[0-9]*[1-9][0-9]*$/,message: '请输入大于0的整数'}],
                     appIdDefaultQps: [{ pattern:/^[0-9]*[1-9][0-9]*$/,message: '请输入大于0的整数'}],
                },
                // 编辑
                isEdit: false
            } 
        },
        async mounted() {
          const result =  await getGlobalRule();
            if(result.code === 200) {
                this.form = result.data   
            }
        },
        methods: {
            handleEdit() {
                this.isEdit = true;
            },
            handleCancel() {
                this.isEdit = false;
            },
            async onSubmit() {
                const result = await saveGlobalRule(this.form);
                if(result.code === 200) {
                    this.$message({
                         type: 'success',
                         message: '保存成功'
                    }
                    );
                    this.isEdit = false;
                }
            }
        }
    }   
</script>

<style lang="scss" scoped>
.wrap {
    display: flex;
    flex-direction: row;
    .tips {
        display: inline-block;
        text-align: center;
        color: #67c23a;
        background: #f0f9eb;
        border: 1px solid #c2e7b0;
        border-radius: 3px;
        min-width: 80px;
        height: 36px;
        line-height: 30px;
        padding: 0 6px;
    }
}
</style>